<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<!--vue前端js框架-->
	<link rel="stylesheet" href="css/index.css"> <!-- 放哪无所谓 -->
	<script src="js/vue.js"></script>
	<!-- axios用来向后端发送请求-->
	<script src="js/axios.js"></script>
	<script src="js/elementui.js"></script>
	<script src="js/common.js"></script>
</head>

<body>
	<div id="app">

		<el-form :inline="true" class="demo-form-inline">
			<el-form-item label="名称">
				<el-input v-model="find" placeholder="品牌"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="init">查询</el-button>
			</el-form-item>
		</el-form>

		<el-button type="success" round @click="xz2">新增子级菜单</el-button>
		<el-button type="success" round @click="xzboss">新增父级菜单</el-button>
		<!-- <el-button type="primary" round @click="xz">新增子级菜单</el-button> -->
		<el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="menuid" border
			:default-expand-all="isopen" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
			<el-table-column prop="menuid" label="ID" sortable width="180"></el-table-column>
			<el-table-column prop="label" label="标题" sortable width="180"></el-table-column>
			<el-table-column prop="href" label="地址" sortable width="180"></el-table-column>
			<el-table-column prop="parentid" label="上级id" sortable width="180"></el-table-column>
			<el-table-column label="图标"><template v-slot="scope">
					<i :class="scope.row.iconcls"></i>
				</template></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination background layout="prev, pager, next" :total="total" :page-size="limit"
		@current-change="handleCurrentChange">
	</el-pagination>

		<el-dialog :title="title" :visible.sync="dialogFormVisible">

			<el-form :model="form">
				<el-input v-model="form.menuId" :label-width="formLabelWidth" type="hidden"></el-input>
				<el-form-item label="菜单标题" :label-width="formLabelWidth">
					<el-input v-model="form.label" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="地址" :label-width="formLabelWidth">
					<el-input v-model="form.href" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="图标" :label-width="formLabelWidth">
					<el-select v-model="form.iconcls" placeholder="请选择">
						<el-option v-for="item in iconCls" :key="item" :label="item" :value="item">
							<i :class="item"></i>
							{{item}}
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="上级ID" :label-width="formLabelWidth"  v-show="!show">
					<el-cascader :props="props" v-model="form.parentId" :options="options"
						:show-all-levels="false"></el-cascader>
				</el-form-item>

			  <el-form-item label="上级ID" :label-width="formLabelWidth" v-show="show">
				<el-input value="0" autocomplete="off" readonly></el-input>
			  </el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="ok2" v-if="score==1">新增</el-button>
				<el-button type="primary" @click="okboss" v-if="score==2">新增父级</el-button>
				<el-button type="primary" @click="upd()" v-if="score==3">修改菜单</el-button>
			</div>
		</el-dialog>

	</div>
</body>
<script>
	var app = new Vue({
		el: '#app',
		data: {//数据存储的地方
			iconCls: ["el-icon-s-flag", "el-icon-star-on", "el-icon-picture-outline", "el-icon-camera-solid", "el-icon-share", "el-icon-view", "el-icon-headset"],
			score: 1,
			find: "",
			show: false,
			tableData: [],
			isopen: false,
			dialogTableVisible: false,
			dialogFormVisible: false,
			title: "新增菜单",
			form: {
				menuId: '',
				label: '',
				iconcls: '',
				href: '',
				parentId: 0,
			},
			total: 0,
				limit: 8,
				page: 1, //默认当前第几页
			options: [],//父级菜单集合数据
			boss: [],
			formLabelWidth: '120px',
			props: {
				value: "menuid",
				emitPath: false, //因为是联机所以会把父级的id也展示出来了 设成false之后只会取最后一个展示的值
				checkStrictly: true
			} //配置父级菜单的casecader 因为展示的值是value但是我们表里面没有value只有id所以就把他当成value换掉

		},
		methods: {//方法
			handleCurrentChange(val) {
				this.page = val
				this.init();
				console.log(`当前页: ${val}`);
			},
			okboss(){//新增父类
				dialogFormVisible = false
				//console.log(this.form)
				console.log(this.form.iconCls)
				axios.post(HTTPPATH + "insboss",this.form).then((result) => {
							alert(result.data)
							location.reload()
						})
			},
			ok2() {//新增子级
				this.score=1,
				this.show=!this.show
				console.log(this.form)
				axios.get(HTTPPATH + "insmenu", { params: { menuId: this.form.menuId, label: this.form.label, href: this.form.href, parentid: this.form.parentId,iconcls: this.form.iconcls } }).then((result) => {
					alert(result.data)
					location.reload()
				})
			},
			xzboss(){//打开父类
				this.score=2,
				this.title="新增父级菜单"
				this.dialogFormVisible = true
				this.show=true
			},
			xz2() {//打开子类
				this.show=false
				let that = this
				axios.get(HTTPPATH + "menu").then((result) => {
					let s = arrayToTree(result.data.data.menu)
					that.options = s
				})
				this.dialogFormVisible = true

			},
			handleEdit(index, row) {
				this.title = "修改菜单"
				this.score = 3
				this.dialogFormVisible = true
				let that = this
				axios.get(HTTPPATH + "menu").then((result) => {
					let s = arrayToTree(result.data.data.menu)
					that.options = s
				})
				axios.get(HTTPPATH + "selectByCapId", { params: { menuid: row.menuid } }).then((result) => {
					if(result.data.data.menuinfo.parentid==0){
						this.show=true
					}else{
						this.show=false
					}
					console.log(result.data.data.menuinfo.parentid)
					this.form.parentId = result.data.data.menuinfo.parentid
					this.form.menuId = result.data.data.menuinfo.menuid
					this.form.label = result.data.data.menuinfo.label
					this.form.iconcls = result.data.data.menuinfo.iconcls
					this.form.href = result.data.data.menuinfo.href
				})
			},
			upd() {
				console.log(this.form.menuId)
				axios.get(HTTPPATH + "updmenu", { params: { menuid: this.form.menuId, label: this.form.label, href: this.form.href, parentid: this.form.parentId,iconcls: this.form.iconcls } }).then((result) => {
					alert(result.data)
					location.reload()
				})
			},
			handleDelete(index, row) {
				console.log(row)
				if (confirm("确定删除吗？")) {
					axios.post(HTTPPATH + "delete", row).then((result) => {
						console.log(row)
						alert(result.data)

						location.reload()
					})
				}

			},
			init() {
				let that = this
				axios.get(HTTPPATH + "menu1?label="+this.find+"&page="+this.page + "&limit=" + this.limit).then((result) => {
					console.log(result.data.records);
					//let s = arrayToTree(result.data.data.menu)
					//console.log(s)
					that.tableData = result.data.records
					that.total = result.data.total
					that.limit = result.data.size
				})

			}
		}, created() {//创建后
			this.init()
		}

	})
</script>

</html>